import $ from 'jquery'

/**
 * 全局注册地图时间自定义指令
 */
export default {
  install(progressTime) {
    // 这里是示例方法 getTime是方法名 function()可以携带参数
    progressTime.prototype.getTimexx = function(options) {
      this.options = {
        container: 'container', // 容器ID名称
        endTime: 11, // 结束时间
        currentTime: 0, // 当前时间
        delay: 2000, // 自动播放动画时间
        isNow: false, // 是否显示右侧回到当前时间
        animateFinish: true, // 动画是否完成
        hoursInterval: 1, types: 'month', data: [], animateCallback: function(config) { // 动画完成回调

        }, callback: function(config) { // 单击事件回成回调

        }, jzback: function() {

        }
      }
      this.options = $.extend(this.options, options)
      this.id = this.options.container
      this.endTime = this.options.endTime
      this.currentTime = this.options.currentTime
      this.types = this.options.types
      this.data = this.options.data
      this.timer = null
      this.playSelf = null
      this.init()
    }
    progressTime.prototype.init = function() {
      this.createDom()
      this.bindEvent()
      this.resize()
      return this
    }
    progressTime.prototype.createDom = function() {
      const left = $('<div class=\'' + this.id + '-left\'></div>')
      const leftHtml = '<span class=\'' + this.id + '-left-start\'></span>'
      left.append(leftHtml)

      const center = $('<div class=\'' + this.id + '-center\'></div>')
      const centerHtml = '<div class=\'' + this.id + '-center-t\'><div class=\'' + this.id + '-center-t-bar\'></div></div><div class=\'' + this.id + '-center-c\'></div>'
      center.append(centerHtml)

      const right = $('<div class=\'' + this.id + '-right' + '\'></div>')
      const rightHtml = '<span class=\'' + this.id + '-right-b-zuoce\'></span><span class=\'' + this.id + '-right-b-youce\'></span>'
      right.append(rightHtml)

      $('#' + this.id).html(left).append(center).append(right)
      typeof this.options.jzback === 'function' && this.options.jzback()
      this.createCenter() // 创建内容的DOM
    }
    progressTime.prototype.createCenter = function() {
      const cTop = $('.' + this.id + '-center-t')
      cTop.append('<div class=\'' + this.id + '-center-t-tooltip\'></div>')
      cTop.append('<ul class=\'' + this.id + '-center-t-ul\'></ul>')

      const cCenter = $('.' + this.id + '-center-c')
      cCenter.append('<ul class=\'' + this.id + '-center-c-ul\'><li class=\'' + this.id + '-center-c-ul-li\' style=\'width:100%;\'></li></ul>')

      // 按间隔
      let spanHtml = ''
      let yuefen = ''
      const kuan = $('body').width()
      const liWidth = kuan / 100 * 40.5 * 0.7916667 - 10 - 43 - 72
      const hoursWidth = liWidth / this.options.endTime // 计算每个小时所占的宽度
      const intervalCount = this.options.data
      for (let is = 0; is < intervalCount.length; is++) {
        yuefen += '<li style="width: ' + hoursWidth + 'px" name="' + is + '"></li>'
      }
      $('.' + this.id + '-center-t-ul').append(yuefen)
      for (let i = 0; i < intervalCount.length; i++) {
        const temp = (hoursWidth * i * this.options.hoursInterval) / liWidth * 100 + '%'
        let num = intervalCount[i]
        if (num < 10) {
          num = '0' + num
        }
        if (this.options.types === 'month') {
          spanHtml += '<span style=\'left:' + temp + ';\'><b>' + num + '月</b><i></i></span>'
        } else {
          spanHtml += '<span style=\'left:' + temp + ';\'><b>' + num + ':00</b><i></i></span>'
        }
      }
      $('.' + this.id + '-center-c-ul-li').append(spanHtml)
      this.setTime()
    }
    progressTime.prototype.setConfig = function(config) {
      const _this = this
      const widthPercent = config.width
      // 时间轴的长度
      $('.' + this.id + '-center-t-tooltip').html('').stop().animate({
        'left': widthPercent
      })
      // 固定的tooltip
      $('.' + this.id + '-center-t-bar').stop().animate({
        width: widthPercent
      }, function() { // 动画完成
        if (config.e !== 'resize') { // 判断是否是浏览器改变窗口大小执行，如果是就不走回调
          _this.options.animateFinish = true
          const timer = setTimeout(function() {
            _this.autoPlay(_this.playSelf) // 两秒之后再继续走播放条
            clearTimeout(timer)
          }, 0)
        }
      })
      typeof this.options.callback === 'function' && this.options.callback(config)
    }

    progressTime.prototype.setTime = function(e, type) {
      const layerX = e && e.originalEvent && e.originalEvent.layerX
      var type = e && e.type
      const kuan = $('body').width()
      const liWidth = kuan / 100 * 40.5 * 0.7916667 - 10 - 43 - 72
      const hoursWidth = liWidth / this.options.endTime // 计算每个所占的宽度
      let progressWidth = (hoursWidth * this.currentTime * this.options.hoursInterval) / liWidth * 100 + '%'
      if (layerX) { // 移动或点击重新求距离
        const zuoyi = e.originalEvent.offsetX
        const fenkuan = hoursWidth / 2
        if (fenkuan > zuoyi) {
          this.currentTime = Number(this.currentTime) - 1
          progressWidth = (hoursWidth * this.currentTime * this.options.hoursInterval) / liWidth * 100 + '%'
        }
      }
      if (this.currentTime > this.endTime) {
        this.currentTime = Number(this.currentTime) - 1
        progressWidth = (hoursWidth * this.currentTime * this.options.hoursInterval) / liWidth * 100 + '%'
      }
      this.setConfig({
        currentTime: this.currentTime, width: progressWidth, type: type, e: e
      })
    }

    progressTime.prototype.bindEvent = function() {
      const _this = this
      // 点击
      $('.' + this.id + '-center-t-ul li').on('click', function(e) {
        this.playSelf = null
        if (_this.currentTime < _this.endTime) {
          _this.currentTime = Number($(this).attr('name')) + 1
        }
        _this.setTime(e)
      })
      // 点击播放
      $('.' + this.id + '-left-start').on('click', function() {
        if (!$(this).hasClass('stop')) {
          _this.autoPlay(this)
        } else {
          _this.stopPlay(this)
        }
      })
      // 点击后退
      $('.' + this.id + '-right-b-zuoce').on('click', function() {
        this.playSelf = null
        if (_this.currentTime > 0) {
          _this.currentTime = Number(_this.currentTime) - 1
          _this.setTime()
        }
      })
      // 点击前进
      $('.' + this.id + '-right-b-youce').on('click', function() {
        this.playSelf = null
        if (_this.currentTime < _this.endTime) {
          _this.currentTime = Number(_this.currentTime) + 1
          _this.setTime()
        }
      })
    }

    progressTime.prototype.autoPlay = function(node) { // 播放
      const _this = this
      _this.timer && clearTimeout(_this.timer)
      this.playSelf = $(node)
      if (_this.currentTime < _this.endTime && node && $(node).length) {
        // _this.currentTime = _this.currentTime ? _this.currentTime : _this.currentTime+1; // 加一时间戳
        this.playSelf.addClass('stop')
        _this.timer = setTimeout(function() {
          if (_this.options.animateFinish) { // 动画完成后，并且页面渲染后再调用
            _this.options.animateFinish = false
            _this.currentTime += 1
            _this.setTime(null)
            if (_this.currentTime >= _this.options.endTime) { // 时间边界判定
              _this.stopPlay(node)
            }
          }
        }, _this.options.delay)
      }
    }

    progressTime.prototype.stopPlay = function(node) {
      this.playSelf.removeClass('stop')
      this.playSelf = null
      clearTimeout(this.timer)
      this.timer = null
    }

    progressTime.prototype.resize = function() { // 自适应只调用一次，解决浏览器触发多次resize方法
      const _this = this
      let tempTimer = null
      $(window).resize(function() {
        if (!tempTimer && !_this.timer) { // 浏览器缩放会重置时间轴，这里判断_this.timer是否存在再重置
          tempTimer = setTimeout(function() {
            _this.setTime('resize')
            clearTimeout(tempTimer)
            tempTimer = null
          }, 0)
        }
      })
    }
  }
}

